<p-card [style]="{width: '316px'}" styleClass="p-card-shadow text-center">
  <ng-template pTemplate="header">
    <div>
      <img class="border-round-top cover"
           height="120"
           alt="Card"
           src="https://images.unsplash.com/photo-1612865547334-09cb8cb455da?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
      >
    </div>
    <div class="flex justify-content-center" style="margin-top: -50px">
      <img
        class="customer-avatar"
        [src]="customerImage"
      >
    </div>
  </ng-template>
  <ng-template pTemplate="content">
    <p-badge
      [value]="'' + (customerIndex + 1)"
    ></p-badge>
    <h2>{{customer.name}}</h2>
    <p class="text-gray-600">{{customer.email}}</p>
    <p class="text-gray-600">{{customer.age}} | {{customer.gender}}</p>
  </ng-template>
  <ng-template pTemplate="footer">
    <button
      pButton
      label="Update"
      class="p-button-secondary p-button-outlined p-button-rounded"
      (click)="onUpdate()"
    ></button>
    <button
      pButton
      label="Delete"
      class="p-button-danger p-button-outlined p-button-rounded ml-3"
      (click)="onDelete()"
    ></button>
  </ng-template>
</p-card>
